<template>
	<view class="padding_30">
		<view class="type-item flex">
			<text class="flex-1">手机号码</text>
			<input class="Input" style="text-align: right;" type="text" placeholder-style="color:#999999;font-size:28rpx" placeholder="请输入手机号码" maxlength="11" v-model="mobile" />
		</view>
		<view class="type-item flex">
			<text class="flex-1">验证码</text>
			<input class="Input" style="text-align: right;" type="text" placeholder-style="color:#999999;font-size:28rpx" placeholder="请输入验证码" maxlength="6" v-model="code" />
			<uv-code :seconds="seconds" ref="codeRef" @change="codeChange"></uv-code>
			<text class="code" @click="getCodes">{{tips}}</text>
		</view>
		<view class="type-item flex">
			<text class="flex-1">输入密码</text>
			<input class="Input" style="text-align: right;" type="password" placeholder-style="color:#999999;font-size:28rpx" placeholder="请输入密码" v-model="password" />
		</view>
		<view class="type-item flex">
			<text class="flex-1">再次输入密码</text>
			<input class="Input" style="text-align: right;" type="password" placeholder-style="color:#999999;font-size:28rpx" placeholder="请再次输入密码" v-model="repassword" />
		</view>
		<view class="btn" @click="comfirm">确定</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { throttle } from '@/utils/utils.js'
	import { useUserStore } from '@/store/modules/user.js'
	const userstore = useUserStore()
	const mobile = ref('') //手机号
	const code = ref('') //验证码
	const password = ref('') //密码
	const repassword = ref('') //确认密码
	const seconds = ref(60)
	const tips = ref('')
	const codeRef = ref()
	const codeChange = (text) => {
		tips.value = text
	}
	const getCodes = throttle(async () => {
		if (codeRef.value.canGetCode) {
			uni.showLoading({
				title: '正在获取验证码'
			})
			let res = await userstore.getCode({
				mobile: mobile.value
			})
			if (res.code == 200) {
				uni.hideLoading();
				uni.$uv.toast('验证码已发送');
				// 通知验证码组件内部开始倒计时
				codeRef.value.start();
			} else {
				uni.$uv.toast(res.message)
			}
		} else {
			uni.$uv.toast('倒计时结束后再发送');
		}
	}, 500)
	// 忘记密码
	const comfirm = throttle(() => {
		let params = {
			mobile: mobile.value,
			code: code.value,
			password: password.value,
			confirm_password: repassword.value
		}
		userstore.registerOrForgetPwd(params, 2)
	})
</script>

<style lang="scss" scoped>
	.type-item {
		padding: 0 30rpx;
		margin-top: 30rpx;
		justify-content: space-between;
		width: 690rpx;
		height: 112rpx;
		background: #F6F6F6;
		border-radius: 20rpx 20rpx 20rpx 20rpx;

		.Input {
			font-size: 28rpx;
		}

		.code {
			padding-left: 30rpx;
			font-size: 28rpx;
			color: #FE3052;
		}

		.tip {
			font-weight: 400;
			font-size: 28rpx;
			color: #999999;
		}

		.concant-img {
			width: 48rpx;
			height: 48rpx;
		}

		image {
			width: 28rpx;
			height: 28rpx;
		}

		.input-box {
			display: flex;
			align-items: center;

			input {
				text-align: right;
				font-size: 28rpx;
			}
		}
	}

	.btn {
		position: fixed;
		bottom: 30rpx;
	}
</style>